<!--
 * @description: 功能
 * @author: Yoke
 * @Date: 2024-08-28 21:01:12
-->
<script setup lang="ts">
import { NSpace, NStep, NSteps } from 'naive-ui';
import { provide, reactive, ref, toRefs } from 'vue';
import SurveyOverview from './SurveyOverview.vue';
import ComputerRoomSituation from './ComputerRoomSituation.vue';
import NetworkElementPlan from './NetworkElementPlan.vue';
import PowerSupplyEquipment from './PowerSupplyEquipment.vue';
const current = ref(2)

const state = reactive({
    data: {

    }
})

const prev = () => {
    if (current.value > 1) {
        current.value--
    }
}

const next = () => {
    if (current.value < 4) {
        current.value++
    }
}

const setData = (data: any) => {
    state.data = {
        ...state.data,
        ...data
    }
}

provide('steps', {
    ...toRefs(state),
    prev,
    next,
    setData
})
</script>
<template>
    <div class="container m-auto py-3">

        <n-space>
            <n-steps :current="current as number">
                <n-step title="查勘概况"></n-step>
                <n-step title="本期工程概况、设备情况" />
                <n-step title="查勘情况总结" />
                <n-step title="电源设备" />
            </n-steps>
        </n-space>
        <div v-show="current == 1" class="mt-4">
            <SurveyOverview />
        </div>
        <div v-show="current == 2" class="mt-4">
            <ComputerRoomSituation />
        </div>
        <div v-show="current == 3" class="mt-4">
            <NetworkElementPlan />
        </div>
        <div v-show="current == 4" class="mt-4">
            <PowerSupplyEquipment />
        </div>
    </div>
</template>
